<template>
  <div class="setting-management-container">
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="item in group"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <GroupForm :form-data="formData[item.name]" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { getList } from '@/api/setting'
  import GroupForm from './components/GroupForm.vue'
  export default {
    name: 'SettingManagement',
    components: {
      GroupForm,
    },
    data() {
      return {
        group: [],
        activeName: '',
        formData: {},
      }
    },
    mounted() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getList().then((res) => {
          this.group = res.data.group
          if (this.group) {
            this.activeName = this.group[0].name
          }
          this.formData = res.data.formData
          console.log(this.formData)
        })
      },
    },
  }
</script>
